<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>Video.js 测试模板</title>
	</head>
    <style>
        li {list-style: none; }
        #dang { height: 40px;text-align: center;padding-top: 650px; }
        #dang input { width: 200px;height: 30px; text-align: left;line-height: 30px;padding-left: 5px; }
        #fan {width: 80px;height: 35px;text-align: center;line-height: 35px;color: #000;display: inline-block;cursor: pointer;}
        .shanpe li { position: absolute;color: #000; height: 30px;line-height: 30px; right: 0px;}
        @keyframes danmuone {
            100% {
                right: 1600px;
            }
        }
    </style>
<body>

    <div class="content" id="content">
        <ul class="shanpe" id="shanpe"></ul>
        <form action="/" method="post" id="dang">
            <input type="text" name="name" value="¥ㄟ(´･ᴗ･`)ノ$暴富" id="dangmu" />
            <span id="fan">发送弹幕</span>
        </form>
    </div>
    <script src="../js/jquery-1.11.0.min.js"></script>
    <script>
        $("#fan").click(function () {
            var dangmuval = $("#dangmu").val();
            var i = Math.floor(Math.random() * 300);//随机高度
            var cont = '<li style="' + 'top: ' + i + 'px;' + 'animation: danmuone 10s 1 forwards linear;' + '">' + dangmuval + '</li>';
            $("#shanpe").append(cont);
        });
    </script>
</body>
</html>
